<style lang="less" scoped>

.sucaiimg_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  margin-left: 18.5vw;
  font-size: 0px;
  .sucaititle{
    font-size: 1.1vw;
  }
  .sucai_img{
    cursor:pointer;
    width: 100%;
  }
  .sucai_title{
    width: 100%;
    text-align:center;
    font-size: 1.1vw;
    height: 3vw;
  }
  .fistimg{
    width: 61vw;
  }
  .footimg{
    width: 61vw;
  }
}
</style>
<template>
  <div >
    <MainUser></MainUser>
    <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw">
      <MainTitle ></MainTitle>
    </affix>
    <div class="sucaiimg_data">
      <!-- <div  v-for="(item,i) in layoutlistdata"
        v-if="i == 0">
        <el-image
          class="fistimg"
          :src="layoutlistdata[0].thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="margin-top:0.5vw;"></div> -->
      <div style="height:0.5vw;"></div>
      <div class="sucaititle" >{{sucaivadiodata.title}}</div>
      <!-- <iframe src="https://v.youku.com/v_show/id_XNTgwOTkyNDUxNg==.html" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;"></iframe> -->

      <div  v-html="iframesrc"></div>
      
      <!-- <div
        v-for="(item,i) in layoutlistdata"
        v-if="i > 0">
        <el-image
          class="footimg"
          :src="item.thumb"
          :fit="'cover'" ></el-image>
      </div> -->
      <div style="height:3vw;"></div>
    </div>
    
  </div>
</template>
<script>
import MainTitle from '../main_title'
import MainUser from '../main_user'
import { sucaivadio,layoutlist } from '@/request/api';
export default {
    data() {
        return {
            type:'',
            title:'',
            sucaivadiodata:[],
            id:'',
            loading:false,
            layoutlistdata:[],
            iframesrc:'',
        }
    },
    mounted() {
      this.id = this.$route.query.id;
    //   this.getlayoutbackground();
      this.getvadio();
    },
    methods: {
        //修改条数
        handleSizeChange(val){
          this.pagintion.page_size = val;
          this.getimglist();
        },
        //翻页 
        handleCurrentChange(val) {
            this.pagintion.page = val;
            this.getimglist();
        },
        //获取系列列表数据
        getvadio(){
          var param = {};
          param.id = this.id;
          sucaivadio(param).then(res => {
            this.loading = false;
            if(res.ok){
                this.sucaivadiodata = res.data;
                var ss = this.sucaivadiodata.url;
                // ss = "<iframe height=498 width=510 src='https://player.youku.com/embed/XNTgwOTkyNDUxNg==' frameborder=0 'allowfullscreen'></iframe>";
                var s = ss.split(" ");
                
                for(let i = 0;i<s.length-1;i++){
                    if(s[i].indexOf("src") != -1){
                        var srcdate = s[i].substr(4,s[i].length-1);
                        this.iframesrc = "<iframe style='width:100%;height:35vw'  src="+srcdate+" frameborder=0 allowfullscreen='true'></iframe>";
                        console.log(this.iframesrc);
                    }
                }
            }
          })
        },
        getlayoutbackground(){
          var param = {};
          param.page = 0;
          param.size = 50;
          param.page_id = 5;
          layoutlist(param).then(res => {
            if(res.ok){
              this.layoutlistdata = res.data.data;
            }
          })
        }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
